<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <title>编辑个人资料</title>
  <style>
    * {
      box-sizing: border-box;
    }

    body {
      font-family: "Microsoft YaHei", sans-serif;
      background: linear-gradient(135deg, #e8f0ff, #f6f9ff);
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
    }

    /* 主卡片 */
    .edit-card {
      background: #fff;
      border-radius: 20px;
      box-shadow: 0 6px 20px rgba(0,0,0,0.1);
      width: 420px;
      padding: 40px 30px;
      text-align: center;
      animation: fadeIn 0.4s ease;
    }

    @keyframes fadeIn {
      from {opacity: 0; transform: translateY(20px);}
      to {opacity: 1; transform: translateY(0);}
    }

    .edit-card h2 {
      margin-bottom: 20px;
      color: #333;
      font-weight: 600;
    }

    /* 用户头像 */
    .avatar-wrapper {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 25px;
    }

    .avatar-wrapper img {
      width: 90px;
      height: 90px;
      border-radius: 50%;
      object-fit: cover;
      border: 3px solid #0078d4;
      box-shadow: 0 2px 6px rgba(0,0,0,0.2);
      margin-bottom: 10px;
      transition: transform 0.2s;
    }

    .avatar-wrapper img:hover {
      transform: scale(1.05);
    }

    .avatar-wrapper small {
      color: #0078d4;
      cursor: pointer;
      font-size: 14px;
    }

    /* 表单部分 */
    .form-group {
      margin-bottom: 18px;
      text-align: left;
    }

    .form-group label {
      display: block;
      margin-bottom: 6px;
      color: #444;
      font-weight: 500;
    }

    .form-group input {
      width: 100%;
      padding: 10px;
      border-radius: 8px;
      border: 1px solid #ccc;
      font-size: 15px;
      transition: all 0.3s;
    }

    .form-group input:focus {
      border-color: #0078d4;
      box-shadow: 0 0 0 2px rgba(0,120,212,0.15);
      outline: none;
    }

    /* 按钮区 */
    .btn-group {
      display: flex;
      justify-content: space-between;
      margin-top: 25px;
    }

    .save-btn, .pwd-btn {
      flex: 1;
      padding: 12px;
      font-size: 15px;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.3s;
    }

    .save-btn {
      background-color: #0078d4;
      color: #fff;
      font-weight: 500;
      margin-right: 10px;
    }

    .save-btn:hover {
      background-color: #005ea2;
    }

    .pwd-btn {
      background-color: #f3f3f3;
      color: #333;
      font-weight: 500;
    }

    .pwd-btn:hover {
      background-color: #e1e1e1;
    }

    /* 弹窗 */
    .modal {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.4);
      justify-content: center;
      align-items: center;
      z-index: 1000;
    }

    .modal-content {
      background: #fff;
      padding: 25px;
      border-radius: 16px;
      width: 360px;
      text-align: left;
      box-shadow: 0 4px 12px rgba(0,0,0,0.25);
      animation: popup 0.25s ease;
    }

    @keyframes popup {
      from {opacity: 0; transform: scale(0.9);}
      to {opacity: 1; transform: scale(1);}
    }

    .modal-content h3 {
      text-align: center;
      color: #333;
      margin-bottom: 15px;
    }

    .modal-content input {
      width: 100%;
      margin: 8px 0;
      padding: 10px;
      border-radius: 8px;
      border: 1px solid #ccc;
      font-size: 15px;
      transition: 0.3s;
    }

    .modal-content input:focus {
      border-color: #0078d4;
      box-shadow: 0 0 0 2px rgba(0,120,212,0.1);
    }

    .modal-btns {
      display: flex;
      justify-content: flex-end;
      margin-top: 15px;
    }

    .modal-btns button {
      padding: 8px 16px;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      font-size: 14px;
      margin-left: 10px;
    }

    #confirm-change {
      background-color: #0078d4;
      color: #fff;
    }

    #confirm-change:hover {
      background-color: #005ea2;
    }

    #cancel-change {
      background-color: #f0f0f0;
    }

    #cancel-change:hover {
      background-color: #e1e1e1;
    }
  </style>
</head>
<body>
<div id="content"></div>

<script>
  const content = document.getElementById("content");

  // 模拟用户数据（未来可替换为后端接口返回）
  const mockUser = {
    nickname: "代码轲",
    email: "coderke@example.com",
    avatar: "https://api.dicebear.com/9.x/adventurer/svg?seed=coderke"
  };

  async function loadPersonalCenter() {
    content.innerHTML = `
        <div class="edit-card">
          <h2>个人资料</h2>

          <div class="avatar-wrapper">
            <img id="avatar" src="${mockUser.avatar}" alt="用户头像">
            <small id="change-avatar">更换头像</small>
          </div>

          <form id="edit-form">
            <div class="form-group">
              <label for="nickname">昵称</label>
              <input type="text" id="nickname" name="nickname" value="${mockUser.nickname}" required>
            </div>

            <div class="form-group">
              <label for="email">邮箱</label>
              <input type="email" id="email" name="email" value="${mockUser.email}" required>
            </div>

            <div class="btn-group">
              <button type="submit" class="save-btn">保存修改</button>
              <button type="button" id="change-password-btn" class="pwd-btn">修改密码</button>
            </div>
          </form>
        </div>

        <!-- 修改密码弹窗 -->
        <div class="modal" id="password-modal">
          <div class="modal-content">
            <h3>修改密码</h3>
            <input type="password" id="old-password" placeholder="原密码" required>
            <input type="password" id="new-password" placeholder="新密码" required>
            <input type="password" id="confirm-password" placeholder="确认新密码" required>
            <div class="modal-btns">
              <button id="cancel-change">取消</button>
              <button id="confirm-change">确认修改</button>
            </div>
          </div>
        </div>
      `;

    // 保存修改
    document.getElementById("edit-form").addEventListener("submit", (e) => {
      e.preventDefault();
      const nickname = document.getElementById("nickname").value.trim();
      const email = document.getElementById("email").value.trim();
      alert(`✅ 修改成功\n昵称：${nickname}\n邮箱：${email}`);
    });

    // 头像修改提示
    document.getElementById("change-avatar").addEventListener("click", () => {
      alert("未来可以在这里上传或选择头像！");
    });

    // 密码修改弹窗
    const modal = document.getElementById("password-modal");
    document.getElementById("change-password-btn").addEventListener("click", () => modal.style.display = "flex");
    document.getElementById("cancel-change").addEventListener("click", () => modal.style.display = "none");

    // 确认修改密码
    document.getElementById("confirm-change").addEventListener("click", () => {
      const oldPwd = document.getElementById("old-password").value.trim();
      const newPwd = document.getElementById("new-password").value.trim();
      const confirmPwd = document.getElementById("confirm-password").value.trim();

      if (!oldPwd || !newPwd || !confirmPwd) return alert("请填写完整信息！");
      if (newPwd !== confirmPwd) return alert("❌ 两次输入的新密码不一致！");
      alert("✅ 密码修改成功！（模拟操作）");
      modal.style.display = "none";
    });
  }

  loadPersonalCenter();
</script>
</body>
</html>
